<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Smith</td>
          <td>10</td>
        </tr>
        <tr>
          <td>Pete</td>
          <td>Brown</td>
          <td>15</td>
        </tr>
        <tr>
          <td>Ann</td>
          <td>Lee</td>
          <td>5</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>
    <script>
      const tres = document.querySelectorAll("tbody tr");
      const tr = Array.from(tres);

      tr.sort((a, b) => {
        return a.children[0].textContent
          .trim()
          .localeCompare(b.children[0].textContent.trim());
      });

      for (let i = tr.length - 2; i >= 0; i--) {
        tr[i + 1].before(tr[i]);
      }
    </script>
  </body>
</html>
